<template>
  <card-box title="会议监测">
    <kb-select slot="header" v-model="yearValue"></kb-select>
    <div class="meeting-box">
      <div class="chart" ref="chart"></div>
      <div class="kb-progress">
        <div class="item" v-for="(item, index) in list" :key="index">
          <KbProgress :title="item.title" :percentage="item.percentage" />
        </div>
      </div>
    </div>
  </card-box>
</template>
<script>
import CommonMixin from '../mixin/CommonMixin';
import KbProgress from './common/KbProgress.vue';
import * as echarts from 'echarts'
export default {
  mixins: [CommonMixin],
  components: { KbProgress },
  props: {
    year: {
      default: 2024
    }
  },
  data() {
    return {
      yearValue: 2024,
      loading: false,
      code: 'MEETING',
      rate: 0,
      list: [
        { title: '出席占比', key: 'attendance_ratio', percentage: 0 },
        { title: '会议准时率', key: 'meeting_punctuality_rate', percentage: 0 },
        { title: '议题复用率', key: 'topic_reuse_rate', percentage: 0 },
        { title: '会议效率', key: 'meeting_efficiency', percentage: 0 },
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    renderChart() {
      this.$nextTick(() => {
        const chart = this.$refs.chart;
        const myChart = echarts.init(chart)
        window.addEventListener('resize', myChart.resize)
        const gradient = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
          { offset: 0, color: 'rgba(43, 142, 243, 1)' },
          { offset: 1, color: 'rgba(71, 228, 229, 1)' }
        ]);
        const options = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              return `${params.data.value}%\n会议量`
            }
          },
          series: [
            {
              type: 'gauge',
              center: ['50%', '50%'],
              radius: '100%',
              startAngle: 90,
              endAngle: -270,
              itemStyle: {
                color: gradient
              },
              progress: {
                show: true,
                overlap: false,
                roundCap: true,
                clip: false
              },
              pointer: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  width: 10,
                  color: [[1, 'rgba(255, 255, 255, 0.16)']] // 底色
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                show: false,
                distance: -20,
                color: '#999',
                fontSize: 20
              },
              anchor: {
                show: false
              },
              title: {
                show: false
              },
              detail: {
                valueAnimation: true,
                width: '100%',
                lineHeight: 24,
                borderRadius: 0,
                offsetCenter: [0, 0],
                fontSize: 16,
                fontWeight: 'bolder',
                formatter: '{value} %\n会议量',
                color: '#fff'
              },
              data: [
                {
                  value: this.rate
                }
              ]
            }
          ]
        }
        myChart.setOption(options)
      })

    },
    async init() {
      this.loading = true
      const res = await this.queryData(this.code)
      this.loading = false
      const dataResult = res.data.dataResult
      const data = dataResult[0]
      if(data) {
        this.rate = data.meeting_quantity
        this.list = this.list.map(item => {
          item.percentage = data[item.key]
          return item
        })
      }
      this.renderChart()

    }
  }
}
</script>
<style lang="scss" scoped>
.meeting-box {
  height: tvh(158);
  display: flex;
  align-items: center;
  padding: tvh(8) tvw(16);

  .kb-progress {
    flex: 1;
    margin-left: tvw(16);
  }

  .chart {
    width: tvw(158);
    height: 100%;
  }
}
</style>